<template>
  <div id="release">
    <el-page-header @back="goBack" content="发布商品" style="margin-bottom: 20px" ></el-page-header>
    <div class="head">在这里，为您的宝贝找到更好的主人</div>
    <div class="top">
      <el-upload class="upload-demo" ref="upload" action="" :on-change='uploadChange'
        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" list-type="picture-card" :auto-upload="false" :limit='1'>
        <!-- <el-button size="small" type="primary">点击上传</el-button> -->
        <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
        <i class="el-icon-plus"></i>
        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
        <div slot="tip" class="el-upload__tip">在此上传商品图片，只能上传一张jpg/png文件，且不超过500kb</div>
      </el-upload>

      <!-- <div style="margin: 60px 0"></div>
      <span>商品名称：</span><el-input placeholder="请输入商品名称" v-model="goodsWantName" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span>商品成色：</span><el-input placeholder="请输入商品成色" v-model="goodsWantLevel" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span style="margin-left: -355px">商品类型：</span><el-select v-model="sortId" placeholder="请选择商品类型">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select><br><br>
      <span style="margin-left: -392px">商品数量：</span><el-input-number v-model="goodsWantCount" :min="1"></el-input-number><br><br>
      <span>期望价格：</span><el-input placeholder="请输入期望价格" v-model="goodsWantPrice" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span style="vertical-align: top">宝贝介绍：</span><el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入宝贝介绍" 
                              v-model="goodsWantInfo" clearable style="display: inline-block; width: 30%;"></el-input><br><br> -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称：" prop="goodsWantName">
          <el-input v-model="ruleForm.goodsWantName"></el-input>
        </el-form-item>
        <el-form-item label="商品成色：" prop='goodsWantLevel'>
          <!-- <el-input v-model="ruleForm.goodsWantLevel"></el-input> -->
          <el-select v-model="ruleForm.goodsWantLevel" placeholder="请选择商品成色" class="left" style="width: 65px">
            <el-option v-for="item in optionsLevel" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类型：" prop='sortId'>
          <el-select v-model="ruleForm.sortId" placeholder="请选择商品类型" class="left" style="width: 110px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品数量：">
            <el-input-number v-model="ruleForm.goodsWantCount" :min="1" class="left"></el-input-number>
        </el-form-item>
        <el-form-item label="期望价格：" prop="goodsWantPrice">
          <el-input v-model.number="ruleForm.goodsWantPrice"></el-input>
        </el-form-item>
        <el-form-item label="宝贝介绍：" prop="goodsWantInfo">
          <el-input type="textarea" v-model="ruleForm.goodsWantInfo"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- <div class="bottom">
      <span>卖家姓名：</span><el-input placeholder="请输入卖家姓名" v-model="inputName" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span>联系方式：</span><el-input placeholder="请输入卖家联系方式" v-model="inputContact" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span>卖家地址：</span><el-input placeholder="请输入卖家地址" v-model="inputAddress" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span>卖家承诺：</span><el-input placeholder="请输入卖家承诺" v-model="inputPromise" clearable style="display: inline-block; width: 30%"></el-input><br><br>
    </div> -->

    <el-button type="primary" round size='medium' native-type='button' @click="releaseClick">发布商品</el-button>
    
  </div>
</template>

<script>
import {request} from '@/network/request'

export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      options: [
        {value: '1', label: '电子产品'}, {value: '2', label: '男装服饰'}, {value: '3', label: '女装服饰'}, {value: '4', label: '家电产品'}, 
        {value: '5', label: '图书音像'}, {value: '6', label: '零食水果'}, {value: '7', label: '美妆彩妆'}
      ],
      optionsLevel: [
        {value: '1', label: '一'}, {value: '2', label: '二'}, {value: '3', label: '三'}, {value: '4', label: '四'}, {value: '5', label: '五'}, 
        {value: '6', label: '六'}, {value: '7', label: '七'}, {value: '8', label: '八'}, {value: '9', label: '九'}, {value: '10', label: '十'}
      ],
      ruleForm: {
        goodsWantName: '',
        goodsWantLevel: '10',
        sortId: '1',
        goodsWantCount: '1',
        goodsWantPrice: '',
        goodsWantInfo: '',
        goodsWantImage: '',
        // inputName: '',
        // inputContact: '',
        // inputAddress: '',
        // inputPromise: ''
      },
      rules: {
        // username: [
        //   { required: true, message: '请输入用户名', trigger: 'blur'},
        //   { min: 3, max: 10, message: '用户名长度在3到10个字符', trigger: 'change'},
        //   { min: 3, max: 10, message: '用户名长度在3到10个字符', trigger: 'blur'}
        // ],
        goodsWantName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goodsWantLevel: [
          { required: true, trigger: 'blur' }
        ],
        sortId: [
          { required: true, trigger: 'blur' }
        ],
        goodsWantPrice: [
          { required: true, message: '请输入期望价格', trigger: 'blur' },
          { type: 'number', message: '期望价格必须是数字值' }
        ],
        goodsWantInfo: [
          { required: true, message: '请输入宝贝描述', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // submitUpload() {
    //   this.$refs.upload.submit();
    // },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadChange(file) {
      // 获取到上传文件的文件对象
      let fileObj = file.raw
      if(!/image\/\w+/.test(fileObj.type)) { 
        alert("请确保文件为图像类型"); 
        return false; 
      }
      let reader = new FileReader();
      reader.readAsDataURL(fileObj);
      let _this = this
      // 将得到的base64字符串保存到goodsWantImage
      reader.onload = function() {
        _this.ruleForm.goodsWantImage = reader.result
      }
    },
    releaseClick() {
      // 点击发布商品按钮，向服务器发送请求
      let user = {
        goodsWantName: this.ruleForm.goodsWantName,
        goodsWantLevel: +this.ruleForm.goodsWantLevel,
        sortId: +this.ruleForm.sortId,
        goodsWantCount: this.ruleForm.goodsWantCount,
        goodsWantPrice: +this.ruleForm.goodsWantPrice,
        goodsWantInfo: this.ruleForm.goodsWantInfo,
        goodsWantImage: this.ruleForm.goodsWantImage,
        userId: this.$store.state.userId,
        goodsWant: 'g'
      }
      // 判断用户是否添加商品图片
      if(!this.ruleForm.goodsWantImage) {
        this.$message({
          message: '请添加商品图片！',
          type: 'warning'
        })
      } else if (!this.ruleForm.goodsWantName || !this.ruleForm.goodsWantPrice || !this.ruleForm.goodsWantInfo) {
        this.$message({
          message: '请完善商品信息！',
          type: 'warning'
        })
      } else {
        request({
          url: '/goods-want/releaseGoodsWant',
          method: 'post',
          data: user
        }).then(res => {
          if(res.data.flag) {
            this.$message({
              message: '发布商品成功！',
              type: 'success'
            })
          }
          // 发布商品成功后跳转到对应商品详情页面
          // console.log(res);
          this.$store.commit('changeGoodsId', res.data.data.goodsWantId)
          this.$store.commit('changeGoodsWantDetail', 'g')
          this.$router.push('/goodsDetail')
        }).catch(err => {
          console.log(err);
        });
      }
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  #release {
    /* height: 1000px; */
    background-color: #fff;
    text-align: center;
    padding-bottom: 20px;
  }

  #release .head {
     background-color: #fff8f0;
     /* text-align: center; */
     height: 40px;
     line-height: 40px;
     margin-bottom: 20px;
  }

  #release .top {
    /* border: 1px solid #cccccc; */
    padding-top: 30px;
  }

  #release .top .left {
    float: left;
    /* text-align: center; */
  }

  #release .top .el-form-item {
    width: 40%;
    margin: 30px auto;
  }

  /* #release .bottom {
    border: 1px solid #cccccc;
    margin: 20px 0;
    padding-top: 10px;
  } */
</style>